<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品排序</title>
    <style>
            ul , ol {
                list-style: none;
                padding: 0;
                margin: 0;
                float: left;
                margin-left: 50px;
            }
        
            ul li {
                width: 160px;
                height: 40px;
                border: 1px solid #ccc; 
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
           ol {
               width: 600px;
               height: 1000px;
               background-color: #f0f0f0;
           }
           ol li {
               width: 598px;
               height: 100px;
               border: 1px solid gray;
           }
           ol li div {
               height: 40px;
           }
    </style>
</head>
<body>

    <ul>
        <li><span>单价最高</span></li>
        <li><span>单价最低</span></li>
        <li><span>销量最高</span></li>
        <li><span>信用最高</span></li>
    </ul>

    <ol>
        
    </ol>

    <script>
        // 1.0 假数据
        var data = [
                {
                    "price":199,
                    "sales":10000,
                    "honesty":2,
                    "desc":"大白菜"
                },
                {
                    "price":599,
                    "sales":9999,
                    "honesty":5,
                    "desc":"大西瓜"
                },
                {
                    "price":399,
                    "sales":6666,
                    "honesty":9,
                    "desc":"大番薯"
                }
            ]
    </script>
    
</body>
</html>